<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { Male, Female, ArrowRightBold } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { UserOutlined } from '@ant-design/icons-vue';
import axios from 'axios'
let router = useRouter()
let user = ref(JSON.parse(localStorage.getItem('user') || '{}'))
// 检查 user 是否为有效用户，可以添加如下计算属性或方法：
const hasUserInfo = computed(() => Object.keys(user.value).length > 0)

let seting = () => {

    
    if (hasUserInfo.value) {
        router.push('/setting')
    } else {
        router.push('/seting')
    }
}

let tz = (path: any) => {
    if (hasUserInfo.value) {
        router.push(path)
    } else {
        router.push('/login')
    }
}

const tz1 = () => {
    console.log(1);
    
   
}
//测试用户是否成功
/* onMounted(()=>{
    getinfo()
})
let getinfo = async ()=>{
    let {data:{data}} = await axios.get('http://localhost:3000/yg/getuser?name=admin&password=123456')
    localStorage.setItem('user',JSON.stringify(data[0]))
} */

</script>
<template>
    <div id="home">
        <p style="text-align: center;margin-top: 20px;">我的</p>
        <!-- 个人信息页面 -->
        <!-- 进行一个用户信息判断 -->
        <div class="username" v-if="hasUserInfo" @click="router.push('/userinfo')">
            <img src="../assets/头像.png" alt="" class="tx" @click="router.push('/userinfo')">
            <p style="margin-top: 10px;">
                <el-icon v-if="user.sex === 1" style="color: #fff;">
                    <Male />
                </el-icon>
                <el-icon v-else style="color: #fff;">
                    <Female />
                </el-icon>
            </p>
            <p style="margin-top: 10px;">{{ user.name }}</p>
        </div>
        <!-- 没有登录 -->
        <div class="login" v-else>
            <div class="logintx">
                <UserOutlined style="font-size: 30px;" /> <!--未登录的用户头像-->
            </div>
            <div class="loginbtn" @click="router.push('/login')">
                <button class="btn">登录</button>/<button class="btn">注册</button>
            </div>
        </div>

        <div class="list">
            <div class="top">
                <h3 style="padding-left: 20px;">订单中心</h3>
                <div class="right" style="display: flex;height: 30px;align-items: center;">
                    <p>全部</p>
                    <el-icon>
                        <ArrowRightBold />
                    </el-icon>
                </div>
            </div>
            <!-- 订单中心 -->
            <div class="main">
                <div class="Center" @click="tz('/shop')">
                    <img src="@/assets/代付款.svg" alt="">
                    <p>待付款</p>
                </div>
                <div class="Center" @click="tz('/shop')">
                    <img src="@/assets/待发货.svg" style="width: 28px;height: 27px;" alt="">
                    <p>待发货</p>
                </div>
                <div class="Center" @click="tz('/shop')">
                    <img src="@/assets/待收货.svg" alt="">
                    <p>待收货</p>
                </div>
                <div class="Center" @click="tz('/shop')">
                    <img src="@/assets//退款.svg" alt="">
                    <p>退款</p>
                </div>
            </div>
            <!-- 基础服务 -->
            <div class="footer">
                <div class="top">
                    <h3 style="padding-left: 20px;">基础服务</h3>
                </div>
                <div class="main">
                    <!-- <div class="Center" @click="seting">
                        <img src="@/assets/我的收藏.svg" alt="" >
                        <p>我的收藏</p>
                    </div>                     -->
                    <div class="Center">
                        <img src="@/assets/浏览足迹.svg" alt="">
                        <p>浏览足迹</p>
                    </div>
                    <div class="Center">
                        <img src="@/assets/收货地址.svg" alt="">
                        <p>收货地址</p>
                    </div>
                    <div class="Center">
                        <img src="@/assets/发票中心.svg" alt="">
                        <p>发票中心</p>
                    </div>
                    <div class="Center">
                        <img src="@/assets/帮助与客服.svg" alt="">
                        <p>帮助与客服</p>
                    </div>
                    <div class="Center" @click="seting">
                        <img src="@/assets/设置.svg" alt="">
                        <p>设置</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>



<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #EFF0F2;
}

#home {
    width: 100%;
    height: 100%;

    .username {
        width: 90%;
        height: 200px;
        margin: 0 auto;
        margin-top: 20px;
        background-color: #00BE8C;
        border-radius: 20px;
        text-align: center;

        .tx {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-top: 30px;
        }
    }

    .login {
        width: 90%;
        height: 200px;
        margin: 0 auto;
        margin-top: 20px;
        background-color: #00BE8C;
        border-radius: 20px;
        text-align: center;
        overflow: hidden;

        .logintx {
            width: 60px;
            height: 60px;
            background-color: #FFFFFF;
            border-radius: 50%;
            line-height: 60px;
            margin: 0 auto;
            margin-top: 30px;
        }

        .loginbtn {
            width: 100px;
            height: 30px;
            border: 1px solid #FFFFFF;
            border-radius: 20px;
            margin: 0 auto;
            margin-top: 20px;
            line-height: 30px;
            color: #FFFFFF;

            .btn {
                width: 40px;
                height: 20px;
                line-height: 20px;
                background: #00BE8C;
                border: none;
                color: #FFFFFF;

            }
        }
    }

    .list {
        width: 90%;
        height: 170px;
        background-color: #FFFFFF;
        margin: 0 auto;
        margin-top: 20px;
        border-radius: 20px;
        border: 1px solid #EFF0F2;

        .top {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .main {
            width: 100%;
            height: 140px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .Center {
                width: 20%;
                text-align: center;
                height: 50px;
            }
        }
    }

    .footer {
        widows: 90%;
        height: 200px;
        background-color: #FFFFFF;
        margin: 0 auto;
        margin-top: 20px;
        border-radius: 20px;
        border: 1px solid #EFF0F2;

        .top {
            width: 100%;
            height: 30px;

        }

        .main {
            width: 100%;
            height: 170px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

            .Center {
                width: 25%;
                height: 50px;
                text-align: center;

            }
        }
    }
}
</style>